<template>
  <div class="api-config-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">API配置</h1>
        <div class="status-badges">
          <el-tag type="primary" class="total-badge">
            <el-icon><Connection /></el-icon>
            总配置: {{ stats.totalConfigs }}
          </el-tag>
          <el-tag type="success" class="active-badge">
            <el-icon><Check /></el-icon>
            已启用: {{ stats.activeConfigs }}
          </el-tag>
          <el-tag type="warning" class="pending-badge">
            <el-icon><Clock /></el-icon>
            待验证: {{ stats.pendingConfigs }}
          </el-tag>
          <el-tag type="danger" class="error-badge">
            <el-icon><CircleClose /></el-icon>
            错误: {{ stats.errorConfigs }}
          </el-tag>
        </div>
      </div>
      
      <div class="header-actions">
        <!-- 新增配置 -->
        <el-button 
          type="primary" 
          :icon="Plus" 
          @click="showCreateConfigDialog"
        >
          新增配置
        </el-button>
        
        <!-- 批量操作 -->
        <el-button 
          :icon="Operation" 
          @click="showBatchOperations"
          :disabled="selectedConfigs.length === 0"
        >
          批量操作 ({{ selectedConfigs.length }})
        </el-button>
        
        <!-- 导出配置 -->
        <el-button :icon="Download" @click="exportConfigs">
          导出配置
        </el-button>
        
        <!-- 刷新数据 -->
        <el-button 
          :icon="Refresh" 
          @click="loadConfigs"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>
    </div>

    <!-- 统计概览 -->
    <el-row :gutter="16" class="stats-row">
      <el-col :xs="24" :sm="6">
        <MetricCard
          title="今日请求数"
          :value="stats.todayRequests"
          icon="TrendCharts"
          color="#1890ff"
          :trend="stats.requestTrend"
        />
      </el-col>
      <el-col :xs="24" :sm="6">
        <MetricCard
          title="成功率"
          :value="stats.successRate"
          suffix="%"
          icon="SuccessFilled"
          color="#52c41a"
          :trend="stats.successTrend"
        />
      </el-col>
      <el-col :xs="24" :sm="6">
        <MetricCard
          title="平均响应时间"
          :value="stats.avgResponseTime"
          suffix="ms"
          icon="Timer"
          color="#fa8c16"
          :trend="stats.responseTrend"
        />
      </el-col>
      <el-col :xs="24" :sm="6">
        <MetricCard
          title="错误率"
          :value="stats.errorRate"
          suffix="%"
          icon="Warning"
          color="#f5222d"
          :trend="stats.errorTrend"
        />
      </el-col>
    </el-row>

    <!-- 筛选条件 -->
    <el-card class="filter-card" shadow="never">
      <el-form :model="queryParams" inline>
        <el-form-item label="配置状态">
          <el-select v-model="queryParams.configStatus" clearable placeholder="全部状态">
            <el-option label="启用" value="active" />
            <el-option label="禁用" value="inactive" />
            <el-option label="待验证" value="pending" />
            <el-option label="错误" value="error" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="API类型">
          <el-select v-model="queryParams.apiType" clearable placeholder="全部类型">
            <el-option label="银行接口" value="bank" />
            <el-option label="支付接口" value="payment" />
            <el-option label="ERP接口" value="erp" />
            <el-option label="第三方服务" value="third_party" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="配置名称">
          <el-input
            v-model="queryParams.configName"
            placeholder="输入配置名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryParams.createDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">
            查询
          </el-button>
          <el-button :icon="Refresh" @click="handleReset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 配置列表 -->
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <span>API配置列表</span>
          <div class="table-actions">
            <el-button-group>
              <el-button :icon="Sort" @click="handleSort('created_at')">
                按创建时间
              </el-button>
              <el-button :icon="Sort" @click="handleSort('last_used')">
                按最后使用
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>

      <el-table
        ref="configTableRef"
        :data="tableData"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="handleSortChange"
        class="configs-table"
      >
        <el-table-column type="selection" width="50" />
        
        <!-- 配置基本信息 -->
        <el-table-column prop="basicInfo" label="配置信息" min-width="250" fixed>
          <template #default="{ row }">
            <div class="config-basic-cell">
              <div class="config-name-row">
                <span class="config-name">{{ row.name }}</span>
                <el-tag 
                  v-if="row.type === 'bank'" 
                  type="primary" 
                  size="small"
                  class="type-tag"
                >
                  银行
                </el-tag>
                <el-tag 
                  v-else-if="row.type === 'payment'" 
                  type="success" 
                  size="small"
                  class="type-tag"
                >
                  支付
                </el-tag>
                <el-tag 
                  v-else-if="row.type === 'erp'" 
                  type="warning" 
                  size="small"
                  class="type-tag"
                >
                  ERP
                </el-tag>
                <el-tag 
                  v-else 
                  type="info" 
                  size="small"
                  class="type-tag"
                >
                  第三方
                </el-tag>
              </div>
              <div class="config-description" v-if="row.description">
                {{ row.description }}
              </div>
              <div class="config-endpoint" v-if="row.endpoint">
                {{ row.endpoint }}
              </div>
            </div>
          </template>
        </el-table-column>
        
        <!-- 配置状态 -->
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag 
              :type="getConfigStatusType(row.status)"
              size="small"
            >
              {{ getConfigStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <!-- 最后使用 -->
        <el-table-column prop="lastUsed" label="最后使用" width="160" sortable>
          <template #default="{ row }">
            <div class="last-used-cell">
              <div class="used-time" v-if="row.lastUsedAt">
                {{ formatDate(row.lastUsedAt) }}
              </div>
              <div class="used-count" v-if="row.useCount !== undefined">
                使用 {{ row.useCount }} 次
              </div>
            </div>
          </template>
        </el-table-column>
        
        <!-- 响应时间 -->
        <el-table-column prop="responseTime" label="响应时间" width="120" sortable>
          <template #default="{ row }">
            <div class="response-time-cell">
              <span v-if="row.avgResponseTime">{{ row.avgResponseTime }}ms</span>
              <span v-else>-</span>
            </div>
          </template>
        </el-table-column>
        
        <!-- 创建时间 -->
        <el-table-column prop="createdAt" label="创建时间" width="120" sortable>
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        
        <!-- 操作列 -->
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button 
                type="primary" 
                link 
                :icon="View" 
                @click.stop="showConfigDetail(row)"
              >
                详情
              </el-button>
              
              <el-button 
                type="success" 
                link 
                :icon="Edit" 
                @click.stop="editConfig(row)"
              >
                编辑
              </el-button>
              
              <el-button 
                type="warning" 
                link 
                :icon="Refresh" 
                @click.stop="testConnection(row)"
                :loading="row.testing"
              >
                测试
              </el-button>
              
              <el-dropdown 
                @command="(command: string) => handleMoreAction(command, row)"
              >
                <el-button type="info" link :icon="More" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item 
                      command="toggleStatus" 
                      :icon="Lock"
                      v-if="row.status === 'active'"
                    >
                      禁用配置
                    </el-dropdown-item>
                    <el-dropdown-item 
                      command="toggleStatus" 
                      :icon="Unlock"
                      v-else
                    >
                      启用配置
                    </el-dropdown-item>
                    <el-dropdown-item 
                      command="copy" 
                      :icon="CopyDocument"
                    >
                      复制配置
                    </el-dropdown-item>
                    <el-dropdown-item 
                      command="delete" 
                      :icon="Delete"
                      divided
                    >
                      删除配置
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.limit"
          :total="total"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 配置详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      :before-close="handleDialogClose"
    >
      <el-form
        ref="configFormRef"
        :model="currentConfig"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="配置名称" prop="name">
          <el-input v-model="currentConfig.name" placeholder="请输入配置名称" />
        </el-form-item>
        
        <el-form-item label="API类型" prop="type">
          <el-select v-model="currentConfig.type" placeholder="请选择API类型" style="width: 100%">
            <el-option label="银行接口" value="bank" />
            <el-option label="支付接口" value="payment" />
            <el-option label="ERP接口" value="erp" />
            <el-option label="第三方服务" value="third_party" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="接口地址" prop="endpoint">
          <el-input v-model="currentConfig.endpoint" placeholder="请输入接口地址" />
        </el-form-item>
        
        <el-form-item label="认证方式" prop="authType">
          <el-select v-model="currentConfig.authType" placeholder="请选择认证方式" style="width: 100%">
            <el-option label="API密钥" value="api_key" />
            <el-option label="OAuth 2.0" value="oauth2" />
            <el-option label="Basic认证" value="basic" />
            <el-option label="无认证" value="none" />
          </el-select>
        </el-form-item>
        
        <el-form-item 
          v-if="currentConfig.authType === 'api_key'" 
          label="API密钥" 
          prop="apiKey"
        >
          <el-input 
            v-model="currentConfig.apiKey" 
            type="password" 
            placeholder="请输入API密钥"
            show-password
          />
        </el-form-item>
        
        <el-form-item 
          v-if="currentConfig.authType === 'oauth2'" 
          label="访问令牌" 
          prop="accessToken"
        >
          <el-input 
            v-model="currentConfig.accessToken" 
            type="password" 
            placeholder="请输入访问令牌"
            show-password
          />
        </el-form-item>
        
        <el-form-item 
          v-if="currentConfig.authType === 'basic'" 
          label="用户名" 
          prop="username"
        >
          <el-input v-model="currentConfig.username" placeholder="请输入用户名" />
        </el-form-item>
        
        <el-form-item 
          v-if="currentConfig.authType === 'basic'" 
          label="密码" 
          prop="password"
        >
          <el-input 
            v-model="currentConfig.password" 
            type="password" 
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        
        <el-form-item label="超时时间(ms)" prop="timeout">
          <el-input-number 
            v-model="currentConfig.timeout" 
            :min="1000" 
            :max="60000" 
            placeholder="请输入超时时间"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="重试次数" prop="retryCount">
          <el-input-number 
            v-model="currentConfig.retryCount" 
            :min="0" 
            :max="5" 
            placeholder="请输入重试次数"
            style="width: 100%"
          />
        </el-form-item>
        
        <el-form-item label="描述" prop="description">
          <el-input 
            v-model="currentConfig.description" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入配置描述"
          />
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="currentConfig.status"
            active-value="active"
            inactive-value="inactive"
            active-text="启用"
            inactive-text="禁用"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button 
            type="primary" 
            @click="saveConfig"
            :loading="saving"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
import { 
  Connection, Check, Clock, CircleClose, Plus, Operation, 
  Download, Refresh, Search, Sort, View, Edit, More, Delete, 
  Lock, Unlock, CopyDocument, Timer, TrendCharts, SuccessFilled, Warning
} from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/appStore'
import MetricCard from '@/views/dashboard/components/MetricCard.vue'

// Store 和 Router
const appStore = useAppStore()
const router = useRouter()

// 响应式数据
const configTableRef = ref()
const configFormRef = ref<FormInstance>()
const loading = ref(false)
const saving = ref(false)

const selectedConfigs = ref<any[]>([])
const tableData = ref<any[]>([])
const total = ref(0)

const dialogVisible = ref(false)
const dialogTitle = ref('')
const formMode = ref<'create' | 'edit'>('create')

// 当前配置
const currentConfig = ref<any>({
  id: '',
  name: '',
  type: 'bank',
  endpoint: '',
  authType: 'api_key',
  apiKey: '',
  accessToken: '',
  username: '',
  password: '',
  timeout: 5000,
  retryCount: 3,
  description: '',
  status: 'active'
})

// 查询参数
const queryParams = reactive({
  page: 1,
  limit: 20,
  configStatus: '',
  apiType: '',
  configName: '',
  createDateRange: [],
  sortField: 'created_at',
  sortOrder: 'desc'
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入配置名称', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择API类型', trigger: 'change' }
  ],
  endpoint: [
    { required: true, message: '请输入接口地址', trigger: 'blur' }
  ],
  authType: [
    { required: true, message: '请选择认证方式', trigger: 'change' }
  ],
  apiKey: [
    { required: true, message: '请输入API密钥', trigger: 'blur' }
  ],
  accessToken: [
    { required: true, message: '请输入访问令牌', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}

// 统计信息
const stats = reactive({
  totalConfigs: 12,
  activeConfigs: 9,
  pendingConfigs: 2,
  errorConfigs: 1,
  todayRequests: 1250,
  successRate: 98.5,
  avgResponseTime: 120,
  errorRate: 1.5,
  requestTrend: 12,
  successTrend: 2.3,
  responseTrend: -5,
  errorTrend: -1.2
})

// 模拟数据
const mockConfigs = [
  {
    id: '1',
    name: '工商银行API',
    type: 'bank',
    endpoint: 'https://api.icbc.com/v1',
    authType: 'api_key',
    apiKey: 'sk-************',
    timeout: 5000,
    retryCount: 3,
    description: '工商银行对账接口',
    status: 'active',
    lastUsedAt: '2023-10-15 14:30:25',
    useCount: 1250,
    avgResponseTime: 120,
    createdAt: '2022-01-15'
  },
  {
    id: '2',
    name: '支付宝支付接口',
    type: 'payment',
    endpoint: 'https://openapi.alipay.com/gateway.do',
    authType: 'oauth2',
    accessToken: 'at-************',
    timeout: 3000,
    retryCount: 2,
    description: '支付宝支付回调接口',
    status: 'active',
    lastUsedAt: '2023-10-20 09:15:30',
    useCount: 890,
    avgResponseTime: 85,
    createdAt: '2022-03-20'
  },
  {
    id: '3',
    name: '用友ERP接口',
    type: 'erp',
    endpoint: 'https://erp.yonyou.com/api',
    authType: 'basic',
    username: 'admin',
    password: '********',
    timeout: 10000,
    retryCount: 1,
    description: '用友ERP数据同步接口',
    status: 'pending',
    lastUsedAt: '2023-09-28 16:45:12',
    useCount: 45,
    avgResponseTime: 250,
    createdAt: '2021-12-10'
  }
]

// 方法
const loadConfigs = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    tableData.value = mockConfigs
    total.value = mockConfigs.length
  } catch (error) {
    ElMessage.error('加载配置数据失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  queryParams.page = 1
  loadConfigs()
}

const handleReset = () => {
  Object.assign(queryParams, {
    page: 1,
    limit: 20,
    configStatus: '',
    apiType: '',
    configName: '',
    createDateRange: [],
    sortField: 'created_at',
    sortOrder: 'desc'
  })
  loadConfigs()
}

const handleSelectionChange = (selection: any[]) => {
  selectedConfigs.value = selection
}

const handleRowClick = (row: any) => {
  // 可以显示快速详情
  console.log('点击配置:', row)
}

const handleSort = (field: string) => {
  if (queryParams.sortField === field) {
    queryParams.sortOrder = queryParams.sortOrder === 'asc' ? 'desc' : 'asc'
  } else {
    queryParams.sortField = field
    queryParams.sortOrder = 'desc'
  }
  loadConfigs()
}

const handleSortChange = ({ prop, order }: any) => {
  if (prop) {
    queryParams.sortField = prop
    queryParams.sortOrder = order === 'ascending' ? 'asc' : 'desc'
    loadConfigs()
  }
}

const handleSizeChange = (val: number) => {
  queryParams.limit = val
  queryParams.page = 1
  loadConfigs()
}

const handleCurrentChange = (val: number) => {
  queryParams.page = val
  loadConfigs()
}

const showConfigDetail = (config: any) => {
  formMode.value = 'edit'
  dialogTitle.value = '配置详情'
  currentConfig.value = { ...config }
  dialogVisible.value = true
}

const editConfig = (config: any) => {
  formMode.value = 'edit'
  dialogTitle.value = '编辑配置'
  currentConfig.value = { ...config }
  dialogVisible.value = true
}

const showCreateConfigDialog = () => {
  formMode.value = 'create'
  dialogTitle.value = '新增配置'
  currentConfig.value = {
    id: '',
    name: '',
    type: 'bank',
    endpoint: '',
    authType: 'api_key',
    apiKey: '',
    accessToken: '',
    username: '',
    password: '',
    timeout: 5000,
    retryCount: 3,
    description: '',
    status: 'active'
  }
  dialogVisible.value = true
}

const handleMoreAction = async (command: string, config: any) => {
  switch (command) {
    case 'toggleStatus':
      await toggleConfigStatus(config)
      break
    case 'copy':
      await copyConfig(config)
      break
    case 'delete':
      await deleteConfig(config)
      break
  }
}

const toggleConfigStatus = async (config: any) => {
  try {
    const action = config.status === 'active' ? '禁用' : '启用'
    await ElMessageBox.confirm(`确定要${action}配置 ${config.name} 吗？`, `${action}配置`, {
      type: 'warning'
    })
    
    ElMessage.success(`${action}成功`)
    loadConfigs()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  }
}

const copyConfig = async (config: any) => {
  try {
    await ElMessageBox.confirm(`确定要复制配置 ${config.name} 吗？`, '复制配置', {
      type: 'info'
    })
    
    ElMessage.success('复制成功')
    loadConfigs()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('复制失败')
    }
  }
}

const deleteConfig = async (config: any) => {
  try {
    await ElMessageBox.confirm(`确定要删除配置 ${config.name} 吗？`, '删除配置', {
      type: 'warning'
    })
    
    ElMessage.success('删除成功')
    loadConfigs()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

const testConnection = async (config: any) => {
  try {
    config.testing = true
    // 模拟测试连接
    await new Promise(resolve => setTimeout(resolve, 2000))
    ElMessage.success('连接测试成功')
  } catch (error) {
    ElMessage.error('连接测试失败')
  } finally {
    config.testing = false
  }
}

const saveConfig = async () => {
  if (!configFormRef.value) return
  
  await configFormRef.value.validate(async (valid) => {
    if (valid) {
      saving.value = true
      try {
        // 模拟保存
        await new Promise(resolve => setTimeout(resolve, 1000))
        ElMessage.success(formMode.value === 'create' ? '新增成功' : '更新成功')
        dialogVisible.value = false
        loadConfigs()
      } catch (error) {
        ElMessage.error(formMode.value === 'create' ? '新增失败' : '更新失败')
      } finally {
        saving.value = false
      }
    }
  })
}

const handleDialogClose = () => {
  dialogVisible.value = false
}

const showBatchOperations = () => {
  if (selectedConfigs.value.length === 0) {
    ElMessage.warning('请先选择配置')
    return
  }
  ElMessage.info('打开批量操作面板')
}

const exportConfigs = async () => {
  try {
    // 模拟导出
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('导出成功')
  } catch (error) {
    ElMessage.error('导出失败')
  }
}

// 工具函数
const getConfigStatusType = (status: string) => {
  const typeMap: Record<string, any> = {
    active: 'success',
    inactive: 'info',
    pending: 'warning',
    error: 'danger'
  }
  return typeMap[status] || 'info'
}

const getConfigStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    active: '启用',
    inactive: '禁用',
    pending: '待验证',
    error: '错误'
  }
  return textMap[status] || status
}

const formatDate = (date: string) => {
  return date.split(' ')[0]
}

// 生命周期
onMounted(() => {
  appStore.setPageTitle('API配置')
  loadConfigs()
})
</script>

<style scoped lang="scss">
.api-config-management {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
  min-height: 100vh;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    
    .header-left {
      .page-title {
        margin: 0 0 12px 0;
        font-size: 24px;
        font-weight: 600;
        color: #1f2d3d;
      }
      
      .status-badges {
        display: flex;
        gap: 12px;
        
        .el-tag {
          display: flex;
          align-items: center;
          gap: 4px;
          font-weight: 500;
        }
      }
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
  
  .stats-row {
    margin-bottom: 20px;
  }
  
  .filter-card {
    margin-bottom: 20px;
  }
  
  .table-card {
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
    }
    
    .configs-table {
      :deep(.el-table__row) {
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: #f5f7fa;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
      }
      
      .config-basic-cell {
        .config-name-row {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 4px;
          
          .config-name {
            font-weight: 500;
          }
          
          .type-tag {
            margin-left: auto;
          }
        }
        
        .config-description,
        .config-endpoint {
          font-size: 12px;
          color: #909399;
        }
      }
      
      .last-used-cell {
        .used-time {
          font-weight: 500;
          margin-bottom: 2px;
        }
        
        .used-count {
          font-size: 12px;
          color: #909399;
        }
      }
      
      .response-time-cell {
        font-weight: 500;
        text-align: center;
      }
      
      .action-buttons {
        display: flex;
        align-items: center;
        gap: 8px;
      }
    }
    
    .pagination-container {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .api-config-management {
    padding: 16px;
    
    .page-header {
      flex-direction: column;
      gap: 16px;
      
      .status-badges {
        flex-wrap: wrap;
      }
      
      .header-actions {
        flex-wrap: wrap;
        justify-content: center;
      }
    }
  }
}
</style>
